if(window.CH == undefined){
    window.CH = {};
}


CH.VC={
    packagename:"business",
    undoflag:0,
    imagesuploaded:0,
    sDiv:"",
    xangle:0,
    counter:4,
    totalcount:4,
    count:4,
    tempdivid:"",
    tempspanid:"",
    items:{},
    tosave:"",
    events:"",
    toload:"",
    angle:0,
    filling:"",
    selecteditem:0,
    imageortext:0,
    imgparam:null,
    filename:"",
    jcrop_api:0,
    boundx:0,
    boundy:0,
    copied:null,
    copiedelementno:"",
    lastaction:"",
    prevstate:"",
    element:"",
    lastalignstate:"Ralign",
    lastfontfam:"serif",
    lastfontsize:"",
    lastcolor:"",
    lasttext:"",
    loaded: false,
    appended: false,
    DivBeingRotated:false,  
    mouseStartAngle:0,    
    DivStartAngle:false  ,
    dirname:"bgimgs/",
    divforbgcolorchange:"left",
    leftsidebgcolor:"",
    rightsidebgcolor:"",
    dropbackground:"",
    isTri:"0",
    leftrightbgcol:"#939466",
    sideId:"drop",
    divclone:"",
    triclone:"",
    paddding:"",
    
    
    
    
    init:function(){
        
        
        CH.VC3.uninitall();
        CH.VC2.uninitall();
        CH.VC.uninitall();


        
        //this.initdestroydrop();
        
        $("#drop").append("<div class='demo' id='demo1' align='right' ><img class='rotate-image' src='imagesapp/rotateimg.png' width='20' height='20' /><img class='drag-image' src='imagesapp/move.png' width='20' height='20' /><img class='delete-image' src='imagesapp/del.png' width='20' height='20' /><span id='span1'>Company-Name</span></div>	<div class='demo' id='demo2' align='right' ><img class='rotate-image' src='imagesapp/rotateimg.png' width='20' height='20' /><img class='drag-image' src='imagesapp/move.png' width='20' height='20' /><img class='delete-image' src='imagesapp/del.png' width='20' height='20' /><span id='span2'>Name</span></div> <div class='demo' id='demo3' align='right' ><img class='rotate-image' src='imagesapp/rotateimg.png' width='20' height='20' /><img class='drag-image' src='imagesapp/move.png' width='20' height='20' /><img class='delete-image' src='imagesapp/del.png' width='20' height='20' /><span id='span3'>Telephone</span></div> <div class='demo' id='demo4' align='right' ><img class='rotate-image' src='imagesapp/rotateimg.png' width='20' height='20' /><img class='drag-image' src='imagesapp/move.png' width='20' height='20' /><img class='delete-image' src='imagesapp/del.png' width='20' height='20' /><span id='span4'>E mail</span></div>");
        
        
        
        
        this.back=new Array();
        var leftside=new Array();
        var rightside=new Array();
        var backside=new Array();
        //var triangle=new Array();
        
        
        
        
        this.items= new Array();
        var it= new CH.item();
        this.items.push(it);
        CH.VC.items[0].id="demo1";
        CH.VC.items[0].innertxt="Company-Name";
        CH.VC.items[0].fontSize="23";
        it= new CH.item();
        this.items.push(it);// hard cord properties of first 4 divs
        CH.VC.items[1].id="demo2";
        CH.VC.items[1].innertxt="Name";
        CH.VC.items[1].fontSize="21";
        it= new CH.item();
        this.items.push(it);
        CH.VC.items[2].id="demo3";
        CH.VC.items[2].innertxt="Telephone";
        CH.VC.items[2].fontSize="18";
        it= new CH.item();
        this.items.push(it);
        CH.VC.items[3].id="demo4";
        CH.VC.items[3].innertxt="E mail";
        CH.VC.items[3].fontSize="18";
        
        
        /* CH.VC.getxandyposition(demo1);
        CH.VC.getxandyposition(demo2);
        CH.VC.getxandyposition(demo3);
        CH.VC.getxandyposition(demo4);
    
*/
        this.undos= new Array();
        this.redos= new Array();
        
        
        
        
        this.initSelection();
        this.initunselect();
        this.initBtBold();
        this.initBtItalic();
        this.initBtUnderline();
        this.initBtLalign();
        this.initBtRalign();
        this.initBtCalign();
        this.initBtClrPickforbg();
        this.initBtClrPick();
        this.inituploadPic();
        //  this.initBtfontfam();
        this.initBtfontsize();
        this.initBtAddField();
        this.initBtRemField();
        this.initBtedit();
        this.initImageedit();
        this.initResizeforimage();
        this.initResizefortext();
        this.initBTchangeBG();
        this.initDrag();
        this.initSave();
        this.initrotatedivs();
        this.initLoad();
        this.initRelBtRotate();
        this.initHideCornerButtons();
        this.initCrtlC();
        this.initCrtlV(); 
        this.initBtUndo();
        this.initBtRedo();
        //this.initeditinplace();    
        //this.init_pre_backgroud();    
        this.initFontFam();
        this.selectelement();
        this.initprevieweps();
        this.initdescription();
        
        //this.initmaketriangle();
        
        getsides();
        // this.initchoose_design();
        //  this.initadd_text();
        //   this.initadd_photo();
        
        
        
        
        makeback();
        matchaddressfromback();
        makeleft();
        makeright();
        
        
        
        
        if(CH.VC.isTri=="1")
        {
            CH.VC.initmaketriangle(CH.VC.sideId);    
        }
        
        


    },
    
    initdescription:function(){
      
        var oThis=this;
     
    //    $("#toolbarCommonAction div button[alt]").tooltip();
     
     
    /*   $("#epsbutton").click(function(){
            for(var i=1;i<=CH.VC.totalcount;i++)
            {
        
                //var temp="demo"+i+"";
                // window.console.log("demo"+i+"");
                CH.VC.getxandyposition("#demo"+i+"");
 
        
            }
        
        
            preview();
    
        });*/
        
    /* $('a').hover(
      function () {
        $('#divDescription').show();
      }, 
      function () {
        $('#divDescription').hide();
      }
   );
        */
        
    },
    
    
    
    
    
    
    
    
    
    
    
    initprevieweps:function(){
      
        var oThis=this;
        $("#epsbutton").click(function(){
            for(var i=1;i<=CH.VC.totalcount;i++)
            {
        
                //var temp="demo"+i+"";
                // window.console.log("demo"+i+"");
                CH.VC.getxandyposition("#demo"+i+"");
 
        
            }
        
        
            preview();
    
        });
    },
    
    
    
    Istriangle:function(){
        
        CH.VC.isTri="1";  
        
    },
    initmaketriangle:function(divIdForTri){
      
        var oThis=this;
        //$("#trianglebutton").click(function(){
          
      //  alert("why1");
        //if(!divIdForTri)
       // {
                 
            //sideId="drop";
            var divwid=($("."+divIdForTri).css("width"));
            var divhig=($("."+divIdForTri).css("height"));
          
          CH.VC.divclone = $("."+divIdForTri).clone()
         // CH.VC.triclone = $(".tridiv").clone()
        
            var divhtml=$("."+divIdForTri).html(); 
            $("."+divIdForTri).empty();  
        
            $("."+divIdForTri).empty();
            $("."+divIdForTri).css("padding","0px");
            $('.tridiv').css("padding","0px");
            $(".sider").append("<div id='tridiv' class='tridiv' style='width:580px; height:350px; position:absolute'> </div>")

            var temp1=($(".drop").css("background-image"));
            var temp2=($(".tridiv").css("background-image"));

            $("."+divIdForTri).prop("id","temp");
            $("."+divIdForTri).prop("class","temp");
            $(".tridiv").prop("id","drop");
            $(".tridiv").prop("class","drop");
            $(".temp").prop("id","tridiv");
            $(".temp").prop("class","tridiv");
            //window.console.log(temp1);
            //window.console.log(temp2);
            $("."+divIdForTri).css("background-image",temp2);
            $(".tridiv").css("background-image",temp1);
            //CH.VC.counter=0;
            //CH.VC.totalcount=0;
            $(".tridiv").css("width","580px");
            $(".tridiv").css("height","350");
            
            $("."+divIdForTri).css("background-size","600px 350px");
            
            //$(".tridiv").css("position","absolute");
            //$(".tridiv").css("top","0px");
            //$("."+divIdForTri).css("position","absolute");
            $("."+divIdForTri).html(divhtml);  
        
        $("."+divIdForTri).css("padding-left", CH.VC.paddding+"px");
        
        
        
            CH.VC.triclone = $("."+divIdForTri).clone();
        CH.VC.initSelection();
           
            //CH.VC.initDrag();
            CH.VC.initResizefortext();
            CH.VC.initBtedit();
            CH.VC.initImageedit();
            CH.VC.initrotatedivs();
            CH.VC.initHideCornerButtons();
            CH.VC.initBtRemField();
             CH.VC.destroyDragResize();
            CH.VC.initResizefortext();
            CH.VC.selectelement();
        //var clone1 = $(".tridiv").clone( true )
        //var clone2 = $("."+divIdForTri).clone()
        
        
        $(".sider").append("<div id='tempdiv'></div>");
                // CH.VC.initdestroytriangle();
        
        
        
        
         
    },
    initdestroytriangle:function(divtoconvert){   // it will have back front etc
      
        //CH.VC.divclone = $("."+divIdForTri).clone()
          //CH.VC.triclone = $(".tridiv").clone()
         // alert("here");
         
          //CH.VC.tridiv.prop("id","newdiv2").insertAfter(".drop");
          //$(".drop").prop("id","todelete1");
          //$(".tridiv").prop("id","todelete2");
         
         
         $("#drop").remove();
          $("#tridiv").remove();
         alert("here"); 
          CH.VC.divclone.insertAfter("#tempdiv").prop("id","drop");
         //CH.VC.triclone.insertAfter("#tempdiv").prop("id","tridiv");
          $("#drop").prop("class","drop");
          
          
          $("#tempdiv").remove();
          
          
          
          //display: none
          
          //
          //$("#todelete1").prop("id","drop");
          //$("#todelete2").prop("id","tridiv");
          //CH.VC.divclone.insertAfter(".sider");
          CH.VC.initSelection();
           
            //CH.VC.initDrag();
            CH.VC.initResizefortext();
            CH.VC.initBtedit();
            CH.VC.initImageedit();
            CH.VC.initrotatedivs();
            CH.VC.initHideCornerButtons();
            CH.VC.initBtRemField();
             CH.VC.destroyDragResize();
            CH.VC.initResizefortext();
            CH.VC.selectelement();
         
    },
      
  
  
  
    uninitall:function(){
        // alert("calling dead");
        // $(".probtn").unbind("click");
        // $(".txtbtn").unbind("click");
        //  $(".uplodtbtn").unbind("click");
      
        $(".back").remove();
        $(".left").remove();
        //$(".drop").remove();
        $(".right").remove();
      
        $('#fontList li').unbind("click");
        $("#predefinebg").unbind("click");
        $('span').unbind("dblclick");
        $(".drop div").unbind("mousedown");
        $(".drop").unbind("click");
        $(".drop").unbind("mouseup");
        $("#UndoButton").unbind("click");
        $("#RedoButton").unbind("click");
        //$(document).unbind("keyup");
        $("#CopyButton").unbind("click");
        $("#PasteButton").unbind("click");
        $("#boldbutton").unbind("click");
        $("#italicbutton").unbind("click");
        $("#underlinebutton").unbind("click");
        $("#Lalignbutton").unbind("click");
        $("#Ralignbutton").unbind("click");
        $("#Calignbutton").unbind("click");
        $("#upphot").unbind("click");
        $("#font1 option").unbind("click");
        $("#fontsize").unbind("change");
        $("#addButton").unbind("click");
        $("#removeButton").unbind("click");
        $(".drop div").unbind("dblclick");
        $(".drop div span .preview").unbind("dblclick");
        //this.destroyDragResize();
        $("#changebg").unbind("click");
        $(".drag-image").unbind("mousedown");
        $("#Save").unbind("click");
        $("#Load").unbind("click");
        
        $(".drop div .rotate-image").unbind("mousedown");
    //$(document).unbind("mouseup");
        
        
       
    },
    
    
    
    initdestroydrop:function(){
        
        $('.drop').empty();
        this.counter=4;
        this.totalcount=4;
        this.count=4;

    },
    
    

    



    
    
    
    to_back:function() {
        var oThis=this;
        $("#backdivimg").click(function(){
            // $('#backdivimg').hide();
            // $('#frontdivimg').show();
            // $(".drop").hide();
           
            //$( ".tools #predefinebg" ).prop("disabled","");
            /*CH.VC.events = $("#toolbarFontAction .miniColors-trigger").data('events');
            window.console.log(CH.VC.events);
            $("#toolbarFontAction .miniColors-trigger").unbind('click')
           */
          
            $("#toolbarFontAction .color-picker").miniColors('disabled', true);
          
    
    
            if(CH.VC.isTri=="1")
            {


                CH.VC.initmaketriangle("back")
            }
            cmn_to_back(CH.VC.packagename);
        });
    },
    to_front:function(){
        var oThis=this;
       
        $("#frontdivimg").click(function(){
            //$("#toolbarFontAction .miniColors-trigger").bind("click");
            //$("#toolbarFontAction .miniColors-trigger").bind('click', CH.VC.events[0]);
            // $("#toolbarFontAction .miniColors-trigger").data('events',CH.VC.events);
            $("#toolbarFontAction .color-picker").miniColors('disabled', false);
            CH.VC.initmaketriangle("drop")
    
            cmn_to_front(CH.VC.packagename);
        });
    
    },
    to_left:function() {
        var oThis=this;
        $("#leftdivimg").click(function(){
            
            // $('#backdivimg').hide();
            // $('#frontdivimg').show();
            // $(".drop").hide();
            
            $("#toolbarFontAction .color-picker").miniColors('disabled', true);        
            CH.VC.divforbgcolorchange="left";
            cmn_to_left();
        });
    },
    to_right:function() {
        var oThis=this;
        $("#rightdivimg").click(function(){
            // $('#backdivimg').hide();
            // $('#frontdivimg').show();
            // $(".drop").hide();
            
            $("#toolbarFontAction .color-picker").miniColors('disabled', true);      
    
            
            CH.VC.divforbgcolorchange="right";
            cmn_to_right();
        });
    },
    
    
    
    
   
   
    
    initFontFam:function() {  
        $('#fontList li').unbind("click");
        $('#fontList li').click(
            function(){
                var chosen = $(this).index();
                $('#fontSelector option:selected')
                .removeAttr('selected');
                $('#fontSelector option')
                .eq(chosen)
                .attr('selected',true);
                $('.selected').removeClass('selected');
                $(this).addClass('selected');
            });
    
    },
    
    
    
    destroyDragResize:function(){
        $(".drop .demo").draggable( "destroy" );
        $(".drop .demo").resizable( "destroy" );


    },
    initHideCornerButtons:function(){
        $(".drop div .rotate-image").hide();
        $(".drop div .delete-image").hide();
        $(".drop div .drag-image").hide();
        
      
    },
    



    initSelection:function(){
        var oThis=this;
        $(".drop div").mousedown(function(){
            var seldiv="#"+$(this).prop("id")
            oThis.selectelement(seldiv);
        
        });
        
        
    },
    
    selectelement:function(proDivId){
        
        $(".drop div").removeClass("highlight");
            
        // window.console.log("select");
        $(".drop div .rotate-image").hide();
        $(".drop div .delete-image").hide();
        $(".drop div .drag-image").hide();
        //alert("selection "+$(this).prop("id"));
        //this.sDiv="#"+$(this).prop("id");
            
        this.sDiv=("#"+($(proDivId).prop("id")));
        
        
        if($(this.sDiv).children().children().prop("class")!="preview")
        {
            
            //window.console.log($(this.sDiv).children('span').css("color"));
            var temp=$(this.sDiv).children('span').css("color");
            //<a class=(".miniColors-trigger") href="#" style="background-color: rgb(232, 49, 49);"></a>
            $("#toolbarFontAction .miniColors-trigger").css("background-color",temp);
        }
        else
        {
                
                
        }
        //window.console.log
        
        
        //var divwid=($(this.sDiv).css("width"));
        //window.console.log(divwid);
        //var spnwid=($(this.sDiv+" span").css("width"));
        
       
        /*
        var divleft=$(this.sDiv).css("left")
        
        $(this.sDiv+" span").css("left",divleft);
        // window.console.log($(this.sDiv+" span").css("left"));
        //window.console.log($(this.sDiv).css("left"));
        
        
        
        var newdivwidth=($(this.sDiv+" span").width());
        $(this.sDiv).width(newdivwidth+45);
*/        
        //window.console.log(spnwid+45);
        //$(this.sDiv).css("width",spnwid+45);
        //var divwid=($(this.sDiv).css("width"));
        //window.console.log($(this.sDiv).width());
        
        this.selecteditem =this.sDiv.substr(this.sDiv.length - 1);
        this.selecteditem--;
        //window.console.log(this.sDiv);
        $(this.sDiv).addClass("highlight");
        $(this.sDiv+" .rotate-image").show();
        $(this.sDiv+" .drag-image").show();
        $(this.sDiv+" .delete-image").show();
        
        this.selecteditem =this.sDiv.substr(this.sDiv.length - 1);
        this.selecteditem--;
            
            
        //window.console.log("In Select sDiv: "+this.sDiv);
        //this.initDrag();
        CH.VC.dragit();
    },
    
    
    

    initunselect:function(){
        var oThis=this;
        $(".drop").unbind("click");
        $(".drop").click(function(e) {
            //$(".drop").click(function(e) {
            oThis.unselectelement(e);       
                
        });
    
    },
    
    unselectelement:function(e){
        
        if($(e.target).prop("id")=="drop")
        {
            $(".drop div").removeClass("highlight");
            $(".drop div .rotate-image").hide();
            $(".drop div .delete-image").hide();
            $(".drop div .drag-image").hide();
            this.sDiv="";
            return true;
        }
           
        return false;
    },


    initRelBtRotate:function(){    //display corner buttons
        var oThis=this;
        $(".drop").unbind("mouseup");
        $(".drop").mouseup(function (e){
            $(oThis.sDiv+" .drag-image").show();
            $(oThis.sDiv+" .delete-image").show();
            $(oThis.sDiv+" .rotate-image").show();
        });
        
    },


    //==========================================================================================
    
    //==========================================================================================
    initBtUndo:function(){  
        var oThis=this;
        $("#UndoButton").unbind("click");
        $("#UndoButton").click(function(){
            oThis.Undoaction();
        });
    
    },
    
    
    Undoaction:function(){
        var oThis=this;
        //alert(oThis.undos.length);
        var checkundo=(oThis.undos.length);
        if(checkundo==0)
        {
            alert("There are no actions to Undo!");
                
        }
        else
        {
            var action=oThis.undos.pop();
            //alert(action);
            oThis.redos.push(action);
            //alert(action);
            //alert("element: "+action.id);
            //alert("last action: "+action.lastaction);
            //alert("last value: "+action.lastvalue);
            //alert("next value: "+action.nextvalue);
            
            
            
            //window.console.log("undo="+JSON.stringify(this.undos));
            // alert(this.element);
            //  alert(this.lastaction);
            if(action.lastaction=="Bold")
            {
                oThis.bold(action.id,1);
            }
            if(action.lastaction=="Italic")
            {
                oThis.italic(action.id,1);
            }
            if(action.lastaction=="Underline")
            {
                oThis.underline(action.id,1);
            }
            if(action.lastaction=="Lalign"||action.lastaction=="Ralign"||action.lastaction=="Calign")
            {
                if(action.lastvalue=="Lalign")
                    oThis.Lalign(action.id,1);
                else if(action.lastvalue=="Ralign")
                    oThis.Ralign(action.id,1);
                else if(action.lastvalue=="Calign")
                    oThis.Calign(action.id,1);
                else
                    oThis.Ralign(action.id,1);
            }
            if(action.lastaction=="Fontchange")
            {
                oThis.fontfamily(action.id, action.lastvalue,1);
            }
            
            if(action.lastaction=="Fontsize")
            {
                oThis.fontsize(action.id, action.lastvalue,1);
            }
       
            if(action.lastaction=="Addfield")
            {
                oThis.removebutton(action.id,1);    
            }
            if(action.lastaction=="Paste")
            {
                oThis.removebutton(action.id,1);    
            }
            if(action.lastaction=="Remfield")
            {
            
                oThis.addbutton(1,action.lastvalue)
            //alert("Can not recover deleted element!");
            }
            if(action.lastaction=="Edit")
            {
                $(action.id+" span").text(action.lastvalue);
            }
            if(action.lastaction=="Pupload")
            {
                oThis.removebutton(action.id,1);
            }
        
        //rotate
        //drag
        }//end of else
     
    },
    //==========================================================================================
    initBtRedo:function(){   
        var oThis=this;
        $("#RedoButton").unbind("click");
        $("#RedoButton").click(function(){
            oThis.Redoaction();
        });
    
    },
    
    Redoaction:function(){
        
        var oThis=this;
                
        //  alert(this.element);
        //   alert(this.lastaction);
        
        
        
        var checkredo=(oThis.redos.length);
        if(checkredo==0)
        {
            alert("There are no actions to redo!");
                
        }
        else
        {
            var action=oThis.redos.pop();
        
            //alert(action);
            oThis.undos.push(action);
            //            alert(action);
            //            alert("element: "+action.id);
            //            alert("last action: "+action.lastaction);
            //            alert("last value: "+action.lastvalue);
            //            alert("next value: "+action.nextvalue);
        
            if(action.lastaction=="Bold")
            {
                oThis.bold(action.id,1);
            }
            if(action.lastaction=="Italic")
            {
                oThis.italic(action.id,1);
            }
            if(action.lastaction=="Underline")
            {
                oThis.underline(action.id,1);
            }
            if(action.lastaction=="Lalign"||action.lastaction=="Ralign"||action.lastaction=="Calign")
            {
                if(action.lastaction=="Lalign")
                    oThis.Lalign(action.id,1);
                else if(action.lastaction=="Ralign")
                    oThis.Ralign(action.id,1);
                else if(action.lastaction=="Calign")
                    oThis.Calign(action.id,1);
                else
                    oThis.Ralign(action.id,1);
            }
            
           
            if(action.lastaction=="Fontchange")
            {
                oThis.fontfamily(action.id, action.nextvalue,1);
            }
            if(action.lastaction=="Fontsize")
            {
                oThis.fontsize(action.id, action.nextvalue,1);
            }
            
            
            if(action.lastaction=="Addfield")
            {
                
                oThis.addbutton(1,action.lastvalue);
            //oThis.removebutton(action.id,1);    
            }
            
            /* if(action.lastaction=="Color")
        {
            Window.console.log("Can not recover last color of the element!");
            //oThis.colorpick(action.id, action.lastvalue,1);    
        }*/
        
         
            if(action.lastaction=="Paste")
            {
                
                oThis.addbutton(1,action.lastvalue)
                
            }
            if(action.lastaction=="Remfield")
            {
                oThis.removebutton(action.id,1);    
                
            //alert("Can not recover deleted element!");
            }
            
            
            /////////////
            if(action.lastaction=="Edit")
            {
                $(action.id+" span").text(action.nextvalue);
            }
            if(action.lastaction=="Pupload")
            {
                oThis.removebutton(action.id,1);
                
            //add image call hoga url or falg jayega
            }
            
            
        }
            
            
    /////////////////
            
            
            
            
        
    },
    //==========================================================================================
    
    initCrtlC:function(){
        var oThis=this;
        var isCtrl = false;
        $(document).unbind("keyup"); 
        $(document).keyup(function (e) { 
            if(e.which == 17)
                isCtrl=false;
        }).keydown(function (e) {
            if(e.which == 17)
                isCtrl=true;
            if(e.which == 67 && isCtrl == true)
            { 
                oThis.copy();
            
            }
        });
        
        $("#CopyButton").unbind("click");
        $("#CopyButton").click(function () {
            oThis.copy();
        });
      
      
    },
    
    
    copy:function(){
        if(this.sDiv != undefined)
        
            // alert($(this.sDiv).html());
        
            var idno=($(this.sDiv).prop("id"));   //demo1
    
        var index=(idno).substr($("#"+idno).prop("id").length-1);//
        //alert(index);
        if(index=="0")
        {
            index=10;
        }
        CH.VC.copiedelementno=index;
         
        this.copied=$(this.sDiv).html();
        window.console.log($(this.sDiv).html());
        
        this.lastaction="Copy";
        this.element=this.sDiv;
    },
    
    initCrtlV:function(){   
        var oThis=this;
        var isCtrl = false;
        $(document).unbind("keyup");
        
        $(document).keyup(function (e) { 
            if(e.which == 17)
                isCtrl=false;
        }).keydown(function (e) {
            if(e.which == 17)
                isCtrl=true;
            if(e.which == 86 && isCtrl == true)
            { 
            
            
                //alert(this.copied);           
                if(oThis.copied != null)
                {
                    oThis.paste(); 
                }
                else
                {
                    alert("please copy any element before paste");
                }
     
            }
        });
        
        
        $("#PasteButton").unbind("click");
        $("#PasteButton").click(function () {
            //alert(oThis.copied);
            if(oThis.copied != null)
            {
                oThis.paste(); 
            }
            else
            {
                alert("please copy any element before paste");
            }
        
    
        });
      
    },
    
      
   
    paste:function(){
        
        this.addbutton();
        $(".drop #demo"+this.totalcount).html(this.copied);
        //$(".drop #demo"+this.totalcount).css(rotation)
        
        var newitem = $(".drop #demo"+this.totalcount);
        /*
        var rotateval="rotate("+q[i].angle+"deg)";
        divid.css('-moz-transform', rotateval);
        //     divid.css('-webkit-transform', rotateval);
*/




        var copiedsize=($("#demo"+CH.VC.copiedelementno).css("font-size"));//////////////////////////////////////////////
        var copiedangle= (CH.VC.items[CH.VC.copiedelementno-1].angle);//////////////////////////////////////////






        var rotaval="rotate("+copiedangle+"deg)";
        
        newitem.css('-moz-transform',rotaval);
        newitem.css('-webkit-transform', rotaval);
        newitem.css('-o-transform', rotaval);
        newitem.css('-ms-transform', rotaval);
        
        $(".drop #demo"+this.totalcount).css("font-size",copiedsize);
        
       
       
       
        this.items[this.items.length-1].innertxt=this.items[CH.VC.copiedelementno-1].innertxt;
        this.items[this.items.length-1].angle=this.items[CH.VC.copiedelementno-1].angle;
        this.items[this.items.length-1].fontSize=this.items[CH.VC.copiedelementno-1].fontSize;
        
        
        var undo=new CH.undoredo;
        this.undos.push(undo);
        this.undos[this.undos.length-1].id=("#demo"+this.totalcount);
        this.undos[this.undos.length-1].lastaction="Paste";
        this.undos[this.undos.length-1].lastvalue=this.copied;
       
       
        CH.VC.initSelection();
        CH.VC.destroyDragResize();
        CH.VC.initDrag();
        //alert("demo"+count);
            
            
            
        if(this.imageortext==0)
        {
            CH.VC.initResizefortext();
        }
        else
        {
            CH.VC.initResizeforimage();
                    
            this.imageortext=0;
        }
            
        CH.VC.initBtedit();
        CH.VC.initImageedit();
        CH.VC.initrotatedivs();
        CH.VC.initHideCornerButtons();
        CH.VC.initBtRemField();
            
        CH.VC.selectelement();
       
    },
    
    
    initBtBold:function(){   
        var oThis=this;
        $("#boldbutton").unbind("click");
        $("#boldbutton").click(function(){
            //alert(oThis.sDiv);
            oThis.undoflag=0;
            oThis.bold(oThis.sDiv,oThis.undoflag);
        });
        
    },
    
    
    bold:function(proDivId,flag){
        if(proDivId.length>0){
            if($(proDivId+" span").hasClass("bold")){
                $(proDivId+" span").removeClass("bold");
                CH.VC.items[this.selecteditem].isBold=0;    
            }else{
                $(proDivId+"  span").addClass("bold");
                CH.VC.items[this.selecteditem].isBold=1;    
            }
      
            if(flag==0)
            {
                var undo=new CH.undoredo;
                this.undos.push(undo);
                // alert(oThis.undos.length);
                this.undos[this.undos.length-1].id=proDivId;
                this.undos[this.undos.length-1].lastaction="Bold";
            
            }
        //this.element=proDivId;
        //this.lastaction="Bold";
        
        }
        else
        {
            alert("Please select any text field before applying effects");
        }
    },
    
    initBtItalic:function(){
        var oThis=this;
        
        $("#italicbutton").unbind("click");
        $("#italicbutton").click(function(){
            oThis.undoflag=0;
            oThis.italic(oThis.sDiv,oThis.undoflag);
        });
        
        
    },
    italic:function(proDivId,flag){
        if(proDivId.length>0){
            if($(proDivId+" span").hasClass("italic")){
                $(proDivId+" span").removeClass("italic");
                CH.VC.items[this.selecteditem].isItalic=0;    
            }else{
                $(proDivId+"  span").addClass("italic");
                CH.VC.items[this.selecteditem].isItalic=1;  
            }
      
            if(flag==0)
            {
                var undo=new CH.undoredo;
                this.undos.push(undo);
                this.undos[this.undos.length-1].id=proDivId;
                this.undos[this.undos.length-1].lastaction="Italic";
            }
        //this.element=proDivId;
        //this.lastaction="Italic";
        }
        else
        {
            alert("Please select any text field before applying effects");
        }
        
    },
    
    initBtUnderline:function(){
        var oThis=this;
        
        
        $("#underlinebutton").unbind("click");
        $("#underlinebutton").click(function(){
            oThis.undoflag=0;
            oThis.underline(oThis.sDiv,oThis.undoflag);
        });
        
        
    },
    underline:function(proDivId,flag){
        if(proDivId.length>0){
            if($(proDivId+" span").hasClass("underline")){
                $(proDivId+" span").removeClass("underline");
                CH.VC.items[this.selecteditem].isUnderlined=0;            
            }else{
                $(proDivId+"  span").addClass("underline");
                CH.VC.items[this.selecteditem].isUnderlined=1;        
            }
            
            if(flag==0)
            {
                var undo=new CH.undoredo;
                this.undos.push(undo);
                this.undos[this.undos.length-1].id=proDivId;
                this.undos[this.undos.length-1].lastaction="Underline";
            }
        //            this.element=proDivId;
        //            this.lastaction="Underline";
            
        }
        else
        {
            alert("Please select any text field before applying effects");
        }
    },
    initBtLalign:function(){    
        var oThis=this;
        
        $("#Lalignbutton").unbind("click");
        $("#Lalignbutton").click(function(){
            oThis.undoflag=0
            oThis.Lalign(oThis.sDiv,oThis.undoflag);
        
    
        });
        
    },
    
    
       
    
    Lalign:function(proDivId,flag){
        if(proDivId.length>0){
            
            if(flag==0)
            {
                var undo=new CH.undoredo;
                this.undos.push(undo);
            }
            
            if($(proDivId).hasClass("centeralign")){
                if(flag==0){
                    this.undos[this.undos.length-1].lastvalue="Calign";
                }
                $(proDivId).removeClass("centeralign");
            }
            if($(proDivId).hasClass("rightalign")){
                if(flag==0){
                    this.undos[this.undos.length-1].lastvalue="Ralign";
                }
                $(proDivId).removeClass("rightalign");
            }
            $(proDivId).addClass("leftalign");
            CH.VC.items[this.selecteditem].isRightAligned=0;
            CH.VC.items[this.selecteditem].isCenterAligned=0;
            CH.VC.items[this.selecteditem].isLeftAligned=1;
        
            if(flag==0){
                this.undos[this.undos.length-1].id=proDivId;
                this.undos[this.undos.length-1].lastaction="Lalign";
                
            }
            
        }
        else
        {
            alert("Please select any text field before applying effects");
        }
    },
 
    initBtRalign:function(){    
        var oThis=this;
        
        $("#Ralignbutton").unbind("click");
        $("#Ralignbutton").click(function(){
            oThis.undoflag=0
            oThis.Ralign(oThis.sDiv,oThis.undoflag);
        });
        
    },
    
    Ralign:function(proDivId,flag){
        if(proDivId.length>0){
            if(flag==0){
                var undo=new CH.undoredo;
                this.undos.push(undo);
            }
            if($(proDivId).hasClass("centeralign")){
                if(flag==0){
                    this.undos[this.undos.length-1].lastvalue="Calign";
                }
                $(proDivId).removeClass("centeralign");
                
            }
            if($(proDivId).hasClass("leftalign")){
                if(flag==0){
                    this.undos[this.undos.length-1].lastvalue="Lalign";
                }
                $(proDivId).removeClass("leftalign");
            }
            $(proDivId).addClass("rightalign");
            
            CH.VC.items[this.selecteditem].isLeftAligned=0;
            CH.VC.items[this.selecteditem].isCenterAligned=0;
            CH.VC.items[this.selecteditem].isRightAligned=1;
            
            
            
            if(flag==0){
                this.undos[this.undos.length-1].id=proDivId;
                this.undos[this.undos.length-1].lastaction="Ralign";
            }
            
        }
        else
        {
            alert("Please select any text field before applying effects");
        }
    },
    initBtCalign:function(){    
        var oThis=this;
      
        $("#Calignbutton").unbind("click");
        $("#Calignbutton").click(function(){
            oThis.undoflag=0
            oThis.Calign(oThis.sDiv,oThis.undoflag);
        });
    
    },
    Calign:function(proDivId,flag){
        
        if(proDivId.length>0){
            if(flag==0){
                var undo=new CH.undoredo;
                this.undos.push(undo);
            }
            if($(proDivId).hasClass("leftalign")){
                if(flag==0){
                    this.undos[this.undos.length-1].lastvalue="Lalign";
                }
                $(proDivId).removeClass("leftalign");
            }
            if($(proDivId).hasClass("rightalign")){
                if(flag==0){
                    this.undos[this.undos.length-1].lastvalue="Ralign";
                }
                $(proDivId).removeClass("rightalign");
            }
            $(proDivId).addClass("centeralign");
            CH.VC.items[this.selecteditem].isRightAligned=0;
            CH.VC.items[this.selecteditem].isLeftAligned=0;
            CH.VC.items[this.selecteditem].isCenterAligned=1;
        
            if(flag==0){
                this.undos[this.undos.length-1].id=proDivId;
                this.undos[this.undos.length-1].lastaction="Calign";
            }
            
        }
        else
        {
            alert("Please select any text field before applying effects");
        }
    },
  
  
    initBtClrPickforbg:function(){
        var oThis=this;
        
        $(".color-picker-for-background").miniColors({
			
            change: function(hex) {
                
                
                //(CH.VC.divforbgcolorchange);
                //oThis.colorpickforbg(CH.VC.divforbgcolorchange,hex);
               
                if((CH.VC.divforbgcolorchange)=="left"||(CH.VC.divforbgcolorchange)=="right");
                {
                    oThis.colorpickforbg("left",hex);
                    oThis.colorpickforbg("right",hex);
                  
                }
                
                
            }
        });
      
    },
  
  
    colorpickforbg:function(div,hex){
        
        $("."+div).css("background-color" ,hex);
    //CH.VC.items[this.selecteditem].fontcolor=hex;			
	
        
    },
  
  
    
    
    rgb2hex:function(rgb){
        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        function hex(x) {
            return ("0" + parseInt(x).toString(16)).slice(-2);
        }
        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    },
    initBtClrPick:function(){
        var oThis=this;
        $(".color-picker").miniColors({
			
            change: function(hex) {
                oThis.undoflag=0
                oThis.colorpick(oThis.sDiv, hex, oThis.undoflag);
            }
        });
      
    },
     
    colorpick:function(proDivId, hex,flag){
        // alert(proDivId.length);
        /*if(flag==0){
        var undo=new CH.undoredo;
        this.undos.push(undo);   
        
        this.undos[this.undos.length-1].lastvalue=$(proDivId+"  span").css("color");}*/
        $(proDivId+"  span").css("color" ,hex);
        CH.VC.items[this.selecteditem].fontcolor=hex;				
    //window.console.log($(proDivId+"  span").css("color"));
    /* if(flag==0){
        this.undos[this.undos.length-1].id=proDivId;
        this.undos[this.undos.length-1].lastaction="Color";
        this.undos[this.undos.length-1].nextvalue=hex;}   */
    
        
        
    },
   
    inituploadPic:function(){
        var oThis=this;
        
        
        
        $("#upphot").unbind("click");
        $("#upphot").click(function() {
        
            oThis.addimage();
        });
        
    },
    
    
    addimage:function(){
        var oThis=this;
        
        
        $("#outer").html(" <form id='imageform' method='post' enctype='multipart/form-data' action='./ajaximage.php'>Upload your image <input type='file' name='photoimg' id='photoimg' /></form>");
        
        this.imageortext=1;
        
        $("#outer").dialog({
            modal: true,
            open:function(event, ui){
            //$("#imagefrm").show();
                
            },
            buttons: {
                
                Ok: function() {
                    var temp=($("#imageform #photoimg").val());
                    var result = temp.substring(temp.lastIndexOf("."));
                    
                    //alert(result);
                    if(result==".jpg"||result==".png")
                    {
                    
                    
                    
                    oThis.addbutton();
                    $(".drop #demo"+oThis.totalcount+" span").html('');
        
        
                    $(".drop #demo"+oThis.totalcount+" span").html('<img src="imagesapp/loading.gif" alt="Uploading...."/>');
                    
                    //alert($("#imageform input").val());
       
                    //alert(oThis.totalcount);
                    
                    $("#imageform").ajaxForm({
                        success:       oThis.showResponse,
                        target: $(".drop #demo"+oThis.totalcount+" span")
                
                    //                Success: function(responseText, statusText, xhr, $form){
                    //                            whatever you want to do in success goes here
                    //                        }
                    }).submit();
                    
                    $( this ).dialog( "close" );
                    }
                    else{
                        $( this ).dialog( "close" );
                        alert("Please Select jpg or png image to upload");
                        CH.VC.addimage();
                    }
            }    
            }
            
            
        });
    },
    showResponse:function (responseText, statusText, xhr, $form)  { 
        //this<--span
        //alert($(this).children().prop("id"));
       
        $("#outer").html("");
        
        var temp=$(this).prop("id");
        // alert(temp);
        //alert($("#"+temp+" img").prop("id"));
        
        $("#"+temp+" img").attr("style", "width:150px");
        
        
        
        //  window.console.log($("#"+temp).css("height"));
        //  window.console.log($("#"+temp).css("width"));
        
        
        
         
        var newtemp1=($("#"+temp).css("height"));
        //var newStr1 = newtemp1.substring(0, newtemp1.length-2);
        var newtemp2=($("#"+temp).css("width"));
        //var newStr2 = newtemp2.substring(0, newtemp2.length-2);
        //   window.console.log(newtemp1);
        //   window.console.log(newtemp2);
        var imgh=($("#"+temp+" img").css("height"));     
        var imgw=($("#"+temp+" img").css("width"));  
      
        // window.console.log(imgh);
        //   window.console.log(imgw);
        
        
        
        
        //bug have to get height from php by aspect ratio acording to width 150 and set the height
        CH.VC.items[CH.VC.totalcount-1].height= "120";
        CH.VC.items[CH.VC.totalcount-1].width= "150";
        
        
        $(this).parent().resizable( "destroy" );
        var temp2=$(this).children().prop("id");
        CH.VC.imagesuploaded=CH.VC.imagesuploaded+1;
        temp2=temp2+CH.VC.imagesuploaded;
        $(this).children().prop("id",temp2);
        //alert($(this).children().prop("id",temp));
        //CH.VC.items[CH.VC.totalcount]
        
        //alert($("#demo"+CH.VC.count+" img").prop("src"));
        //alert(CH.VC.items[1].innertxt);
         
        //temp=parseInt(temp); 
        var temp3=CH.VC.count;
        window.console.log(temp3);
         
        var url=$("#demo"+temp3+" span img").prop("src");
        //alert(url);
        var filename = url.substring(url.lastIndexOf('/'));
        //alert(filename);
        //filename=filename;       
        //alert(filename);         
         
        //ajax call to store image name into db and in return it gives the id of that pic.
        
        $.ajax({
                        
            type: "POST",
            url:"storeimgtodb.php",
            data:{
                src:filename //here
                                
            } ,
            //success:function(data){
            success:function(data){
                //var temp=$(img).prop('id');
                //temp=temp+"_crop";
                //alert(data);
                //$(img).prop('id',temp);
                //$(img).prop('id',"upimg_crop");
                //alert($(img).prop("id"));
                //$(img).prop('src',updatedfilename);    //here                    
                CH.VC.items[CH.VC.totalcount-1].innertxt=data;
            }
        });
         
         
        
        
        
        //CH.VC.items[CH.VC.totalcount-1].innertxt=filename;//file name ki bajaye id jaye gaaa
        CH.VC.items[CH.VC.totalcount-1].istxt=0;
        
        var undo=new CH.undoredo;
        CH.VC.undos.push(undo);
        CH.VC.undos[CH.VC.undos.length-1].id="#demo"+CH.VC.totalcount;
        CH.VC.undos[CH.VC.undos.length-1].lastaction="Pupload";
        CH.VC.undos[CH.VC.undos.length-1].lastvalue=responseText;
        
       
        CH.VC.count=CH.VC.count+1;
        CH.VC.initImageedit();
        
  
    //alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + '\n\nThe output div should have already been updated with the responseText.'); 
    }, 
 
   
    /* initBtfontfam:function(){
        var oThis=this;
        
        var fontvalue="no";
        
        $("#font1 option").unbind("click");
        $("#font1 option").click(function () {
            oThis.undoflag=0
            //alert("asad");
            oThis.fontfamily(oThis.sDiv, "no", oThis.undoflag);           
        });
        
    },
    */
    asadFunc:function(){
        var oThis=this;
        
        var fontvalue="no";
        
        oThis.undoflag=0
        //alert("asad");
        oThis.fontfamily(oThis.sDiv, fontvalue, oThis.undoflag);           
        
    },
    
    fontfamily:function(proDivId, fontval, flag){
        // alert(proDivId);
        if(proDivId.length>0){
            if(fontval=="no")
            {
                fontval = $("#font1").val();
            }
            if(flag==0){
                var undo=new CH.undoredo;
                this.undos.push(undo);
                var temp=$(proDivId+" span").css("font-family");
                temp=temp.substring(1, temp.length-1);//temp.substring(0, temp.length-2);
                //alert(temp);
                this.undos[this.undos.length-1].lastvalue=temp;
            }
            //window.console.log(fontval);
            // alert($(proDivId+" span").prop("id"));
            $(proDivId+" span").css("font-family" ,"'"+fontval+"'");
            
            
            var str=$(proDivId+"  span").css("font-family");
            str=str.substring(0,str.length - 1);
            str=str.substring(1);
            // window.console.log("temp font: "+str);
            CH.VC.items[this.selecteditem].fontStyle=str;


            if(flag==0){
                temp=$(proDivId+" span").css("font-family");
                temp=temp.substring(1, temp.length-1);
                this.undos[this.undos.length-1].nextvalue=temp;
   
   
                this.undos[this.undos.length-1].id=proDivId;
                this.undos[this.undos.length-1].lastaction="Fontchange";
            
            }


    
        }
        else{
            alert("Please select any text field before applying effects");
        }
    },
	
    
    initBtfontsize:function(){
        var oThis=this;
        var fontsize="no";
       
        $("#fontsize").unbind("change");
        $("#fontsize").change(function () {
            
            oThis.undoflag=0
            oThis.fontsize(oThis.sDiv, fontsize,oThis.undoflag);           
        });
        
    },
    
         
    //needed// newStr=$(newStr).toUnit("pt");
    
    fontsize:function(proDivId, fontval,flag){
        
        
        if(flag==0){
            
            var undo=new CH.undoredo;
            this.undos.push(undo);
            
            //  window.console.log($(proDivId+" span").css("font-size"));
            
            
            var temp=($(proDivId+" span").css("font-size"));
            
            temp=temp.substring(0, temp.length-2);
            temp=parseInt(temp);
            temp=$(temp).toUnit("pt");
            temp=Math.ceil(temp);
            
            this.undos[this.undos.length-1].lastvalue=temp;
            
            
            
        }
        if(proDivId.length>0){
            if(fontval=="no")
            {
                
                fontval = $("#fontsize").val()+"pt";
                window.console.log("here"+fontval);
                
                
            }
            $(proDivId+" span").css("font-size" ,fontval);//-------------
            
            
            
            window.console.log("here"+fontval);


            var newStr = fontval.substring(0, fontval.length-2);
            //  window.console.log(newStr);
       



            CH.VC.items[this.selecteditem].fontSize=newStr;   ////----------------
        
        
            if(flag==0){
                
                var temp=$(proDivId+"  span").css('font-size');
                temp=temp.substring(0, temp.length-2);
                temp=parseInt(temp);
                temp=$(temp).toUnit("pt");
                temp=Math.ceil(temp);    
                
                //var newStr = temp.substring(0, temp.length-2);
                this.undos[this.undos.length-1].nextvalue=temp;
                this.undos[this.undos.length-1].id=proDivId;
                this.undos[this.undos.length-1].lastaction="Fontsize";
            }


          
        }
        else{
            alert("Please select any text field before applying effects");
        }
    },
    
    
    initBtAddField:function(){
        var oThis=this;
        
        
        $("#addButton").unbind("click");
        $("#addButton").click(function () {
            
            oThis.undoflag=0
            oThis.html=0
            oThis.addbutton(oThis.undoflag,oThis.html);           
        });
        
    },
    
    
    addbutton:function(flag,html){
        var oThis=this;
        if(this.counter>9){
            alert("Only 5 new Fields");
            return false;
        }   
	
        else{
            
            var it= new CH.item();
            //it.say("crap");
            //it.isBold=1;
            //alert(JSON.stringify(it));
            this.items.push(it);
            //alert (this.items[0]);
                        
                        
            CH.VC.count=this.totalcount+1;
            //window.console.log("count= "+count);
            //window.console.log("CH.VC.count= "+CH.VC.count);
            if(html==0)
            {
                var temp_html="<div id='demo"+ CH.VC.count +"' class='demo' align='right'><img class='rotate-image' src='imagesapp/rotateimg.png' width='20' height='20' /><img class='drag-image' src='imagesapp/move.png' width='20' height='20' /><img class='delete-image' src='imagesapp/del.png' width='20' height='20' /><span id='span"+ CH.VC.count +"'>Enter Text Here</span></div>";
            }
            else
            {
                var temp_html="<div id='demo"+ CH.VC.count +"' class='demo' align='right'><img class='rotate-image' src='imagesapp/rotateimg.png' width='20' height='20' /><img class='drag-image' src='imagesapp/move.png' width='20' height='20' /><img class='delete-image' src='imagesapp/del.png' width='20' height='20' /><span id='span"+ CH.VC.count +"'>"+html+"</span></div>";
            }
            
            $(".drop").append(temp_html);
            //temp=$(temp).css("font-size");
            window.console.log($("#demo"+CH.VC.count).css("font-size"));
            var temp=$("#demo"+CH.VC.count).css("font-size");//muneeb
            temp=temp.substring(0, temp.length-2);
            temp=parseInt(temp);
            temp=$(temp).toUnit("pt");
            temp=Math.ceil(temp);
            
            
            
            
            
            
            //this.sDiv="#demo"+count;
            //alert(this.sDiv);
            
            //alert($("#demo"+count+" span").html());
            //alert($(".drop demo"+count).html);
            //CH.VC.items[this.selecteditem].innertext=($("#demo"+count+" span").html());
            CH.VC.items[CH.VC.count-1].id="demo"+CH.VC.count;
            CH.VC.items[CH.VC.count-1].innertxt=($("#demo"+CH.VC.count+" span").html());
            CH.VC.items[CH.VC.count-1].fontSize=""+temp;
            //selector();
            oThis.initSelection();
            //oThis.destroyDragResize();
            oThis.initDrag();
            //alert("demo"+count);
            
            
    
            
            if(this.imageortext==0)
            {
                CH.VC.initResizefortext();
            }
            else
            {
                CH.VC.initResizeforimage();
                    
                this.imageortext=0;
            }
            
            oThis.initBtedit();
            oThis.initImageedit();
            oThis.initrotatedivs();
            oThis.initHideCornerButtons();
            oThis.initBtRemField();
            
            oThis.totalcount=this.totalcount+1;
            oThis.counter++;
            CH.VC.selectelement();
            //CH.VC.getxandyposition("demo"+count);
            
            
            if(flag==0)      
            {
                var undo=new CH.undoredo;
                this.undos.push(undo);
            
                this.undos[this.undos.length-1].id="#demo"+this.totalcount;
                this.undos[this.undos.length-1].lastaction="Addfield";
            }
            
            return true;
        }
 
    },
    
    initBtRemField:function(){
        var oThis=this;
        
        $("#removeButton").unbind("click");
        $("#removeButton").click(function () {
            //window.console.log("#removeButton");
            
            
            oThis.undoflag=0
            oThis.removebutton(oThis.sDiv,oThis.undoflag);
            
        });
        $(".drop div .delete-image").unbind("click");
        $(".drop div .delete-image").click(function () {
            
            
            oThis.removebutton(oThis.sDiv,oThis.undoflag);
            
        });
	
    },
      
    removebutton:function(proDivId,flag){
        
        
        
        if(this.counter==0){
            alert("No more textbox to remove");
            return false;
        }   
        else
        {
            
            if (proDivId!="")
            {
                
                if(flag==0){
                    var undo=new CH.undoredo;
                    this.undos.push(undo);
                }
                
                //alert(proDivId);
                this.tempdivid=$(proDivId).attr('id');
                //alert(this.tempdivid); //output demo2 without #.
                this.tempspanid=$(proDivId+" span").attr('id');
                
                //alert($(proDivId).html());
                if(flag==0){
                    this.undos[this.undos.length-1].lastvalue=$(proDivId+" span").html();
                }
                
                $(proDivId).remove();
                
                //delete from item here muneeb1
               
                for(var i=0;i<CH.VC.items.length;i++)
                {
                    
                    if((CH.VC.items[i].id)==(this.tempdivid))
                    {
                        //alert("dont");
                        CH.VC.items[i]=CH.VC.items[CH.VC.items.length-1];
                        CH.VC.items[i].id=this.tempdivid;
                    
                
                        CH.VC.items.pop();
                    }
                //alert("found the id: "+CH.VC.items[i].id);
                
                
            
                }
                
                
                // end of delete from item
                $(".drop #demo"+this.totalcount).prop('id',this.tempdivid);
                $(".drop #span"+this.totalcount).prop('id',this.tempspanid);
                this.totalcount--;
                this.counter--;
                this.count--;
                this.sDiv="";
                //alert(this.sDiv);

                if(flag==0){
                    this.undos[this.undos.length-1].id=proDivId;
                    this.undos[this.undos.length-1].lastaction="Remfield";
                }
                
                
            }  
            else{
                
            {
                    alert("please selectt any element to delete");
                }
                
            }
        }
 
    },
    
    
    initBtedit:function(){
        var oThis=this;
        
        $(".drop div").unbind("dblclick");
        $(".drop div").dblclick(function(e) {
            
            
            e.stopImmediatePropagation();
            e.preventDefault();
            //var spanid="#"+($(this).prop("id"));
            
            
            if($(this).children().children().prop("class")!="preview")
            {
                
                
                oThis.editor();
            }
            else
            {
                return;
            }
            
            return
        });
        
    },
    
    editor:function(){
    
    
    
        var oThis=this.sDiv+" span";


        if ($(this.sDiv).children(" span").hasClass('inputMode')) {
            //    window.console.log($(this.sDiv).children(" span").prop("id"));
            return true;
        }
        
        var tartalom = $(this.sDiv).children(" span").html();
        //alert(tartalom);
        var undo=new CH.undoredo;//
        this.undos.push(undo);//
        this.undos[this.undos.length-1].lastvalue=tartalom;//        
        this.undos[this.undos.length-1].id=("#"+$(this.sDiv).prop("id"))//
        var temp=$(this.sDiv).children(" span");
        var temp2=temp;
        var temp3=temp;
        // window.console.log($(temp).css("font-size"));
        temp=$(temp).css("font-size");
        
        
        //  window.console.log($(temp2).css("color"));
        temp2=$(temp2).css("color");
        window.console.log($(temp3).css("font-family"));
        temp3=$(temp3).css("font-family");
        //   temp3=$(temp3).substring(1);
        // window.console.log(temp3.slice(0,-1));
        window.console.log(temp3.substring(0, 1));
        if((temp3.substring(0, 1)=="'")||(temp3.substring(0, 1)=="\""))
        {
    
            temp3 = temp3.substring(1, temp3.length-1);
    
        //window.console.log(temp3);    
        }
        
        $(this.sDiv).children(" span")
        .empty()
        .append("<input type='text' id='input2' style='background-color:transparent;font-size:"+temp+";color:"+temp2+";font-family:"+temp3+"' value='" + tartalom + "'>")
        .addClass('inputMode');
        $("#input2").mouseout(function() {
            
            //alert($(this).prop("id"));
            $(this).parent().html($(this).val())
            .removeClass('inputMode');
            //CH.VC.initrotatedivs();//
            var index=($(oThis).prop("id")).substr($(oThis).prop("id").length-1);//
            CH.VC.items[index-1].innertxt=$(this).val();//
            CH.VC.undos[CH.VC.undos.length-1].nextvalue=$(this).val();//
            CH.VC.undos[CH.VC.undos.length-1].lastaction="Edit";//


            return false;                    
        });
    },
	
 
	
    
    initImageedit:function(){
        var oThis=this;
        
        $(".drop div span .preview").unbind("dblclick");
        $(".drop div span .preview").dblclick(function() {
            var imgsrc=($(this).prop('src'));
            //alert(imgsrc);
            //var ext =;
            // $("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
            $("#target").removeAttr('src').prop('src',imgsrc);
            
            //alert($("#target").prop('src'));
            //$("#preview").removeAttr('src').prop('src',imgsrc);   current
            oThis.editorz(this);
            
        });
        
    },
    
    
    
  
    editorz:function(img){
        
        
        //alert($(img).prop("src"));
        var oThis=this;
        if($(img).prop("id")=="upimg_crop")
        {
            alert("Cannot crop an image more than once!");    
            
        }
        
        else{
            
            
            //alert($(img).prop("id"));//this gives id of image
            var temp=($(img).prop("src"));
            
            //alert($('#target').prop("src"));
            var imgStr = "<img class='cropImage' src='"+temp+"' />";
            //$('#target').prop("src",temp);
            //alert($('#target').prop("src"));
            $('#target').html(imgStr);
            //alert($('#target').html());
       
            $("#cropper").dialog("destroy");
            $("#cropper").dialog({
                modal: true,
                width:"auto",
                height:"auto",
                open:function(event, ui){
                    $($('#target .cropImage')[0]).Jcrop({
                        onChange: oThis.updateCoords,
                        onSelect: oThis.updatePreview,
                        aspectRatio: 1
                    },function(){
                        // Use the API to get the real image size
                        var bounds = this.getBounds();
                        oThis.boundx = bounds[0];
                        oThis.boundy = bounds[1];
                        // Store the API in the jcrop_api variable
                        oThis.jcrop_api = this;
                    });
                },
                buttons: {
                    Crop: function() {
                        var imgs=($(img).prop('src'));
                    
                    
                        //$("#target").prop('src',imgs);
                    
                        //alert($("#target").prop('src'));
                        var url=$("#target").prop('src');       
                        oThis.filename = url.substring(url.lastIndexOf('/')+1);
                        oThis.filename="uploads/"+oThis.filename;
                        var ext =("."+oThis.filename.split('.').pop());
                        var output = oThis.filename.substr(0, oThis.filename.lastIndexOf('.')) || oThis.filename;
                        var updatedfilename=(output+"1"+ext);
                    
                    
                    
                        $.ajax({
                        
                            type: "POST",
                            url:"crop.php",
                            data:{
                                src:oThis.filename, //here
                                x:CH.VC.imgparam.x,
                                y:CH.VC.imgparam.y,
                                w:CH.VC.imgparam.w,
                                h:CH.VC.imgparam.h
                            } ,
                            //success:function(data){
                            success:function(){
                                //var temp=$(img).prop('id');
                                //temp=temp+"_crop";
                            
                                //$(img).prop('id',temp);
                                $(img).prop('id',"upimg_crop");
                                //alert($(img).prop("id"));
                                $(img).prop('src',updatedfilename);    //here                    
                        
                            }
                        });
                    
                        oThis.jcrop_api.destroy();    
                    
                        $( this ).dialog( "close" );
                    }
            
                }
            });
        }
    },
  
  
 
    updateCoords:function(c)
    {
        var oThis=this;
        //  alert(oThis);
        CH.VC.imgparam=c;
    //   alert(oThis.imgparam.x);
    //   alert(oThis.imgparam.y);
    //   alert(oThis.imgparam.w);
    //   alert(oThis.imgparam.h);
    //$('#x').val(c.x);
    //$('#y').val(c.y);
    //$('#w').val(c.w);
    //$('#h').val(c.h);
    },

    checkCoords:function()
    {
        if (parseInt($('#w').val())) return true;
        alert('Please select a crop region then press submit.');
        return false;
    },
  
    /* current
    updatePreview:function(c){
        if (parseInt(c.w) > 0)
        {
            var rx = 100 / c.w;
            var ry = 100 / c.h;

            $('#preview').css({
                width: Math.round(rx * this.boundx) + 'px',
                height: Math.round(ry * this.boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }
    },
     */

  
  
  
  
    mWid:220,
    initDiagonal:"",
    initFontSize:"",
    
    initResizefortext:function(){
        var oThis=this;
        oThis.destroyDragResize();
        var resizeTimerSet = false;
        fontResize=function(parentDiv, selItem)
        {
            var maxWidth = $(parentDiv).width();
            var maxHeight = $(parentDiv).height();			
            var _text = $(parentDiv+"  span");
            var fontSize = parseInt(_text.css("font-size"), 10);
            var multiplier = maxWidth/_text.width();
            fontSize = (fontSize*(multiplier-0.1));
            150;//just a max font-size from where we start decreasing it
            do { 
                _text.css('font-size', fontSize);
                textHeight = _text.height();
                textWidth = _text.width();
                fontSize = fontSize - 1;
            } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);	
            resizeTimerSet = false;		

            var temp = _text.css('font-size');
            var newStr = temp.substring(0, temp.length-2);
	
                        
            newStr=Math.ceil(newStr);
            newStr=parseInt(newStr);
            newStr=$(newStr).toUnit("pt");
            newStr=Math.ceil(newStr);
                        
            newStr=""+newStr;    
            window.console.log(newStr);
                        
            CH.VC.items[selItem].fontSize=newStr;    
			
        };
        
    
    window.console.log("yunyun");
        $(".drop .demo").resizable({
            //handles: "all",
            aspectRatio:false,
            containment: "parent",
            minWidth: 40,
            minHeight: 40,
            resize:function(event, ui) {
		window.console.log("yunyun");		
                if(!resizeTimerSet) 
                {
                    window.setTimeout (function(){fontResize(oThis.sDiv, oThis.selecteditem);}, 100);
                    resizeTimerSet = true;
                }
				
            //_text.css('font-size', fontSize);
            //$(oThis.sDiv+"  span").css('font-size', $(oThis.sDiv).height() ); 
                
                
            //    window.console.log($(oThis.sDiv+" span").css('font-size'));
            //    var temp=($(oThis.sDiv+" span").css('font-size'));
            //    var newStr = temp.substring(0, temp.length-2);
            //   window.console.log(newStr);
            //    CH.VC.items[oThis.selecteditem].fontSize=newStr;    
            }
        });
        
        
        
    },
    

    getContentDiagonal:function(proDivId) {
        var contentWidth = $(proDivId).width();
        var contentHeight = $(proDivId).height();
        return contentWidth * contentWidth + contentHeight * contentHeight;
    },
    
    
    
    
    
    initResizeforimage:function(){
        var oThis=this;
        oThis.destroyDragResize();
        $(".drop .demo").resizable({
            //handles: "all",
            aspectRatio:true,
            containment: "parent",
            minWidth: 40,
            minHeight: 40,
            resize:function(event, ui) {}
        });
        
    //  window.console.log($(".drop div span img").css("wight"));
    //  window.console.log($(".drop div span img").css("height"));
    },
    
    
    initBTchangeBG:function(){  //change background
        var oThis=this;
        $("#changebg").unbind("click");
        $("#changebg").click(function() {
            
            oThis.changebackground();    
        });
        
    },
    
    changebackground:function(){ 
    
    
        $("#imageform2").replaceWith("");
    
        var formStr = " <form id='imageform2' method='post' style='display:none;' enctype='multipart/form-data' action='./ajaximage2.php'>"+
        "Upload your image <input type='file' name='photoimg2' id='photoimg2' />"+
        "<input type='hidden' name='rand1' value='"+Math.random()+"' />" +
        "</form>";
    
        $("#outer").html("");
        $("#outer").html(formStr);
        //$("#photoimg2").replaceWith("<input type='file' name='photoimg2' id='photoimg2' />"+Math.random());
    
    
        $("#imageform2").dialog("destroy");
        $("#imageform2").dialog({
            modal: true,
            open:function(event, ui){
            //$("#imagefrm").show();
                
            },
            buttons: {
                Ok: function() {
                    var temp=($("#imageform2 #photoimg2").val());
                    var result = temp.substring(temp.lastIndexOf("."));
                    
                    //alert(result);
                    if(result==".jpg"||result==".png")
                    {
                        $("#imageform2").ajaxForm(
                        {

                            success:    function(responseText, statusText, xhr, $form) { 
                           
                           
                                CH.VC.fitbackground();
                           
                                //ajax call here
                          
                           
                                //alert("here Ia"+responseText);
                                $('.drop').css('background-image', 'url()');
                                $('.drop').hide();
                            
                                $('.drop').show();
                                //alert("ahahah");
                                //alert($('.drop').css('background-image'));
                                var url = "url(./imagesapp/back.png?"+Math.random()+")";
                                $('.drop').css('background-image', url);
                                $('.back').css('background-image', url);
                            
                            
                            
                            
                            

                            } 
                
                        }).submit();
                        $( this ).dialog( "close" );
                    }
                    else{
                        $( this ).dialog( "close" );
                        alert("Please Select jpg or png image for background");
                        CH.VC.changebackground();
                    }
                        
                        
                }
            }
        });
    },
    
    
  
    fitbackground:function(){ 
        $.ajax({
				
            type: "POST",
            url:"fituserbg.php",
            data:{
            },
            success:function(data)
            {
                $('.drop').css("margin-left", "0px");
                $('.back').css("margin-left", "0px");
                $('.drop').css("width", "580px");
                $('.back').css("width", "580px");
                $('.drop').css("height", "350px");
                $('.back').css("height", "350px");
                //alert(data); //2 possible outputss
                var field = data.split(' ')[1];
                        
                CH.VC.paddding = 580-field;
                CH.VC.paddding = CH.VC.paddding/2;
                var heightOrwidth=data[0];
                window.console.log(heightOrwidth=data[0]);
                if(heightOrwidth=="w")
                {
                    $('.drop').css("background-width", "100%");
                    $('.back').css("background-width", "100%");
                    $('.drop').css("height", field+"px");
                    $('.back').css("height", field+"px");
                    $('.drop').css("background-repeat","no-repeat");
                    $('.back').css("background-repeat","no-repeat");
                // alert("done");
                }
                else if(heightOrwidth=="h")
                {
                    $('.drop').css("background-height", "100%");
                    $('.back').css("background-height", "100%");
                    $('.drop').css("width", field+"px");
                    $('.back').css("width", field+"px");
                    $('.drop').css("margin-left", CH.VC.paddding+"px");
                    $('.back').css("margin-left", CH.VC.paddding+"px");
                    $('.drop').css("background-repeat","no-repeat");
                    $('.back').css("background-repeat","no-repeat");
                //   alert("done");
                }
            }
        });
    },
    
    
    
    
    initDrag:function(){
        var oThis=this;
        //window.console.log("in drag sDiv: "+ oThis.sDiv);
         
        $(oThis.sDiv+" .drag-image").unbind("mousedown");
        $(oThis.sDiv+" .drag-image").mousedown(function(){
            CH.VC.dragit();    
        });
    
    },
    
    dragit:function(){
        var oThis=this;
        
        $(".drop div").draggable({
            containment: "parent",
            drag: function(){
                //alert("dragging");  
             
                $(".drop div .delete-image").hide();
                $(".drop div .rotate-image").hide();
                 
                 
                 
                 
                var obj=document.getElementById("drop");
                var curtop=0;
                var curleft=0;
                var curright=0;
                if (obj.offsetParent) {
                    do {
                        if(curright==0)
                        {
                            curright = obj.offsetWidth;
                        }
                        curleft += obj.offsetLeft;
                        //               window.console.log(curleft);     
                        curtop += obj.offsetTop;
                    //               window.console.log(curtop);    
                    } while (obj = obj.offsetParent);
               
                }
                 
                // window.console.log(curleft);
                var offset = $(this).offset();
                //   window.console.log($(this).prop("id"));
                var divid="#"+$(this).prop("id");
                var xPos = offset.left;
                var yPos = offset.top;
                /*
             //    window.console.log("demo div X: "+offset.left);
             //    window.console.log("demo div Y: "+offset.top);
                
                 offset =$(divid+" span").offset();
            //    window.console.log($(divid+" span").prop("id"));
                xPos = offset.left;
                 yPos = offset.top;
            //    window.console.log("demo div span X: "+offset.left);
            //     window.console.log("demo div span Y: "+offset.top);
                */
                
                //alert(xPos);
                //  window.console.log(oThis.selecteditem);
                if(oThis.selecteditem == -1)
                {
                    oThis.selecteditem=9;
                }
                
                
                var roundx=$.trim(" "+(xPos-curleft));
                var roundy=$.trim(" "+(yPos-curtop));
                //roundx=roundx.substring(0,6);
                //roundy=roundy.substring(0,6);
                
                CH.VC.items[oThis.selecteditem].xposition=$.trim(" "+roundx);
                //window.console.log(oThis.selecteditem);
                
                //     window.console.log(xPos-curleft);
                CH.VC.items[oThis.selecteditem].yposition=$.trim(" "+roundy);
            //      window.console.log(yPos-curtop);
            }        
    
        }) ;
        
        this.lastaction="Drag";
        this.element=this.sDiv;
    
        
        
    },
    
    getxandyposition:function(proDivId){   //proDivId is div name
                    
        var obj=document.getElementById("drop");
        var curtop=0;
        var curleft = 0;
        var curright=0;
        if (obj.offsetParent) {
            do {
                if(curright==0)
                {
                    curright = obj.offsetWidth;
                }
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
               
        }
        // window.console.log(curleft);
        // window.console.log(curtop);
    
    
        var temp=("#"+($(proDivId).prop("id")));
        //
        temp =temp.substr(temp.length - 1);
        
        //    window.console.log("here: "+temp);
        
        if(temp=="0")
        {
            temp=10;
        }
    
        // alert (CH.VC.items[temp-1].angle);
    
    
    
    
    
    
        // if((CH.VC.items[temp-1].angle)>1)
        ///{
        var divid =(temp);
        // window.console.log("divid: "+divid);
        
        var angleOfdiv = (CH.VC.items[temp-1].angle);
        window.console.log("div:"+temp+"has an angle"+ angleOfdiv);
       
        //     window.console.log("angloo: "+angleOfdiv);
        //CH.VC.items[temp-1].angle=0;
        $("#demo"+divid).css('-moz-transform', 'rotate(0deg)');
        $("#demo"+divid).css('-webkit-transform', 'rotate(0deg)');
        $("#demo"+divid).css('-o-transform', 'rotate(0deg)');
        $("#demo"+divid).css('-ms-transform', 'rotate(0deg)');
        
        // }
    
        var offset = $(proDivId).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        
        
        $("#demo"+divid).css('-moz-transform', 'rotate('+angleOfdiv+'deg)');
        $("#demo"+divid).css('-webkit-transform', 'rotate('+angleOfdiv+'deg)');
        $("#demo"+divid).css('-o-transform', 'rotate('+angleOfdiv+'deg)');
        $("#demo"+divid).css('-ms-transform', 'rotate('+angleOfdiv+'deg)');
        //   CH.VC.items[temp-1].angle=angloo;
                
                
                
        //alert(xPos);
        //  window.console.log(oThis.selecteditem);
                
                  
        
        /*  
        if(CH.VC.selecteditem == -1)
        {
            CH.VC.selecteditem=10;
        }
                */
                
        var roundx=$.trim(" "+(xPos-curleft));
        var roundy=$.trim(" "+(yPos-curtop));
        //roundx=roundx.substring(0,6);
        //roundy=roundy.substring(0,6);
                
        //   window.console.log("here I am"+$(proDivId).css("top"));
        //   window.console.log("roundx: "+roundx);
               
        //   window.console.log("roundy: "+roundy);
                
                
        CH.VC.items[temp-1].xposition=$.trim(" "+roundx);
        //    window.console.log(xPos-curleft);
        CH.VC.items[temp-1].yposition=$.trim(" "+roundy);
    //    window.console.log(yPos-curtop);
           
        
    },
    
    
  
    
    
   
   

    
    
    /////////////////////////////////////////////////////**********************
 
   
    
    
    
 
   

    initSave:function(){ ///backhere
        var oThis=this;
        
        
        $("#Save").unbind("click");
        $("#Save").click(function () {
            oThis.savestate();           
        });
        
    },
    


    savestate:function(){
    
        /*
        $.get("execjar.php");
    return false;
   
  */
 

        var i;
        //    window.console.log(CH.VC.totalcount);
        for(i=1;i<=CH.VC.totalcount;i++)
        {
        
            //var temp="demo"+i+"";
            // window.console.log("demo"+i+"");
            CH.VC.getxandyposition("#demo"+i+"");
 
        
        }

    
    
    
    
        
        var temp=$(".left").css("background-color");
        temp=CH.VC.rgb2hex(temp);
        temp=temp.substring(1,temp.length);
        CH.VC.leftsidebgcolor=temp;
        
        var temp2=$(".right").css("background-color");
        temp2=CH.VC.rgb2hex(temp2);
        
        temp2=temp2.substring(1,temp2.length);
        CH.VC.rightsidebgcolor=temp2;
        traverseback();   
        //alert(this.items);
        
        
        
        var obj={
            "triangle":this.triangle,
            "backSide":this.back,
            "frontSide":this.items,
            "leftSide":""+this.leftsidebgcolor,
            "rightSide":""+this.rightsidebgcolor,
            "frontBackground":this.dropbackground,
            //"frontBackground":"back.png",
            "backBackground":this.dropbackground
        //"fillings":this.filling
            
    
            
            
        };
        
        window.console.log("a="+JSON.stringify(obj));
        
        
        //    window.console.log("s="+JSON.stringify(this.back));
        
        //    window.console.log("q="+JSON.stringify(this.items));
        /*      $databasehost=;
        $databasename=VCards;
        $databaseusername;
        $databasepassword;
         */
        //CH.VC.initdestroydrop();
        this.tosave=JSON.stringify(obj);
        /*  $con = @mysql_connect($this->databasehost,$this->databaseusername,$this->databasepassword) or die(mysql_error());

                @mysql_select_db($this->databasename) or die(mysql_error());

         */
        //alert("hghg");
        $.ajax({ 
            type: "POST",
            url: "savetodb.php",
            data: {
                "to_save":this.tosave
            },
            async:false,
            success: function(data){
                $('form#submit').hide(function(){
                    $('div.success').fadeIn();
                });
                
                
                
                $.ajax({ 
                    type: "POST",
                    url: "execjar.php",
                    data: {},
                    success: function(data){
              
                       
                        window.location=window.location+"/sampleEPS_"+data+".eps";
    
                    //alert(data);   to view data to be stored
                    }
                });
                
                
            //alert(data);   to view data to be stored
            }
        });  

    
    
    
   
    
    
    },
    
    
    initLoad:function(){
        var oThis=this;
        $("#Load").unbind("click");
        $("#Load").click(function () {
            oThis.loadstate();           
        });
        
    },
    
    
    loadstate:function(){
    
        $(".drop").empty();
        CH.VC.initdestroydrop();
        // alert("I'm loading...");
    
        $.ajax({ 
            type: "POST",
            url: "loadfromdb.php",
            data: {},
            success: function(data){
                CH.VC.toload=data;           
                //window.console.log(CH.VC.toload);
                
                var obj = JSON.parse(CH.VC.toload);            
                //var q=CH.VC.toload;  
                //var temp=JSON.stringify(q);
                //temp.replaceAll("\\"", "\""");
                //temp.replace("\\\"","\"");

                //window.console.log(obj);
                
                
                
                var backdata=obj.backSide;
                
                $("#backaddress1input").val(backdata[0].inputvalue);
                $("#backaddress2input").val(backdata[1].inputvalue);
                $("#backtelephoneinput").val(backdata[2].inputvalue);
                $("#backwebsiteinput").val(backdata[3].inputvalue);
                
                
                var leftdata=obj.leftSide;
                $(".left").css("background-color","#"+leftdata);
                var rightdata=obj.rightSide;
                $(".right").css("background-color","#"+rightdata);
                
                
                
                var back=obj.frontBackground;
                // alert(back);

                //"C:\\wamp\\www\\VCCC\\"
                $('.drop').css('background-image', 'url()');
                $('.drop').hide();
                $('.drop').show();
                var url = "url(./"+back+"?"+Math.random()+")";
                //CH.VC.dropbackground=url;
                $('.drop').css('background-image', url);




                var q=obj.frontSide;
                window.console.log(q);
                //idher frontarray deni hai q mai 


                //window.console.log("here"+q.frontSide);
                var i;
                var x;
                for(i=0;i<q.length;++i)
                {
                    var x=i+1;
            
                    if(CH.VC.items[i].istxt=="1")
                    {
                        $(".drop").append("<div id = 'demo"+x+"' class='demo' align='right'><img class='rotate-image' src='imagesapp/rotateimg.png' width='20' height='20' /><img class='drag-image' src='imagesapp/move.png' width='20' height='20' /><img class='delete-image' src='imagesapp/del.png' width='20' height='20' /><span id='span"+x+"'>"+CH.VC.items[i].innertxt+"</span></div>"); //current
            
                    //alert("here");    
                    }
                    else if(CH.VC.items[i].istxt=="0")
                    {
                        //alert("hello");
                        //        $(".drop").append("<div id = 'demo"+x+"' class='demo' align='right'><img class='rotate-image' src='imagesapp/rotateimg.png' width='20' height='20' /><img class='drag-image' src='imagesapp/move.png' width='20' height='20' /><img class='delete-image' src='imagesapp/del.png' width='20' height='20' /><span id='span"+x+"'><img class='preview' style='width:150px;'  src='uploads/"+CH.VC.items[i].innertxt+"' /></span></div>"); //current     
                    
                    
                    
                        $.ajax({
                        
                            type: "POST",
                            url:"getimagefromuploads.php",
                            data:{
                                src:CH.VC.items[i].innertxt
                            } ,
                            success:function(data){
        
                                    
                                var src=data;
                                $("#drop").append("<div id = 'demo"+x+"' class='demo' align='right'><img class='rotate-image' src='imagesapp/rotateimg.png' width='20' height='20' /><img class='drag-image' src='imagesapp/move.png' width='20' height='20' /><img class='delete-image' src='imagesapp/del.png' width='20' height='20' /><span id='span"+x+"'><img class='preview' style='width: 150px;'  src='uploads"+src+"' /></span></div>"); //current     
                        
                            }
                        });
                 
                    // $("span"+x).prepend("<img class='preview' src='"+CH.VC.items[i].innertxt+"' />")
                    //      window.console.log($(".drop"+x+" span image").css("height"));
                    //      window.console.log($(".drop"+x+" span image").css("width"));
    
                    // "+CH.VC.items[i].innertxt+"
                    }    
                    //var temp_html="<div id='demo"+ count +"' class='demo' align='right'><img class='rotate-image' src='images/rotateimg.png' width='20' height='20' /><img class='drag-image' src='images/move.png' width='20' height='20' /><img class='delete-image' src='images/del.png' width='20' height='20' /><span id='span"+ count +"'>Enter Text Here</span></div>";  


                    $("#demo"+x).addClass("demo");

                    if (q[i].isBold==1)
                    {
                        $("#span"+x).addClass("bold");
                    }
                    if (q[i].isItalic==1)
                    {
                        $("#span"+x).addClass("italic");
                    }
                    if (q[i].isUnderlined==1)
                    {
                        $("#span"+x).addClass("underline");
                    }
                    if (q[i].isRightAligned==1)
                    {
                        $("#demo"+x).addClass("rightalign");
                    }
                    if (q[i].isLeftAligned==1)
                    {
                        $("#demo"+x).addClass("leftalign");
                    }
                    if (q[i].isCenterAligned==1)
                    {
                        $("#demo"+x).addClass("centeralign");
                    }
                    if (q[i].fontcolor!==0)
                    {
                        $("#span"+x).css("color" , q[i].fontcolor);
                    }
                  
                    
                    
                    
            
                    //window.console.log(q[i].xposition);
                    //window.console.log(q[i].yposition);
                    if (q[i].xposition!==0||q[i].yposition!==0)
                    {
                        var offset = $(".drop").offset();
                        //var mul=52;
                        //q[i].xposition=parseInt(q[i].xposition)+(offset.left);
                        //q[i].yposition=q[i].yposition+offset.top-(i*mul);
                        //q[i].yposition=parseInt(q[i].yposition)+(offset.top);
                        q[i].xposition=parseInt(q[i].xposition);
                        q[i].yposition=parseInt(q[i].yposition);
                        
                        /* var x=parseInt(q[i].xposition)+offset.left;
                        var y=parseInt(q[i].yposition)+offset.top;
                        */
                        $("#demo"+x).css({
                            left: q[i].xposition+"px",
                            top: q[i].yposition+"px"
                        });
                        
                    } 
                    
                    if (q[i].angle!==0)
                    {
                    
                        $("#demo"+x).css('-moz-transform', 'rotate('+q[i].angle+'deg)');
                        $("#demo"+x).css('-webkit-transform', 'rotate('+q[i].angle+'deg)');
                        $("#demo"+x).css('-o-transform', 'rotate('+q[i].angle+'deg)');
                        $("#demo"+x).css('-ms-transform', 'rotate('+q[i].angle+'deg)');
                    }
            
                    // window.console.log($("#demo"+x).css(left));
                    // window.console.log($("#demo"+x).css(top));
                    if (q[i].fontSize!=="0")
                    {
                        $("#span"+x).css("font-size" ,q[i].fontSize);
                    }
                    //window.console.log(q[i]);
            
                    x=i+1;
                }
                CH.VC.initSelection();
                CH.VC.destroyDragResize();
                CH.VC.initDrag();
                CH.VC.initResizefortext();
                CH.VC.initResizeforimage();
                CH.VC.initBtedit();
                CH.VC.initImageedit();
                CH.VC.initrotatedivs();
                CH.VC.initHideCornerButtons();
                CH.VC.initBtRemField();
    









            }
                 
            
            
        });


    //var q=JSON.parse(this.tosave);
  
        
   
    },
    ////////////////////////////////////

    fl_rotate:false,
    initrotatedivs:function() {
        var pw;
        var oThis=this;
        
        
        $(".drop div .rotate-image").unbind("mousedown");
        $(".drop div .rotate-image").mousedown(function (e){
            
            hookRotation(oThis, e);
            return;
            
        });
       
        //$(document).unbind("mouseup");
        $(document).mouseup(function (e){
            
            if(oThis.fl_rotate)
            {                
                oThis.initDrag();
                
                if($(oThis.sDiv).children("span").children().prop("class")!="preview")
                {
                    oThis.initResizefortext();
                }
                else
                {
                    oThis.initResizeforimage();
                }
                
                var ele= $(oThis.sDiv);
                ele.unbind( 'mousemove' );
                ele.draggable({
                    containment: 'parent'
                });
                ele=0;
                oThis.fl_rotate=false;
            }
        });
        
        
        
        
    },
    rotateOnMouse:function (e,pw) 
    {                   
        
        // window.console.log(this);
        rotateOnMouse(this, e, pw);
    },
    
    
    putBackGroundInddforinitialscreen:function(bannertemphtml) 
    {
        _packageType = 'BUSINESS';
        loadDesigns(CH.VC.packagename, false);			
    },       
            
    putchooseformatforinit:function(){
        var oThis=this;
				
        var chooseFormatHtml = "<div style='padding-left:25px; padding-right:25px;'>";
        
        chooseFormatHtml += "<div style='font-size:20px'>Choose a format</div>";
        chooseFormatHtml += "<div  id='formats' style='margin-top:10px; padding:15px; background-color:white; border-right:1px solid gray; border-bottom:1px solid gray'>";
        chooseFormatHtml += "</div></div>";
        /*chooseFormatHtml += "<div style='float:left; padding:5px;'><div style='text-align:center'><img class='cuttings' src='imagesapp/cuttings/cut1.png' width='60' height='60' /></div><div style='text-align:center'><input class='radioFormat' type='radio' name='chooseFormat' value='1' /></div></div>";
        chooseFormatHtml += "<div style='float:left; padding:5px;'><div style='text-align:center'><img class='cuttings' src='imagesapp/cuttings/cut2.png' width='60' height='60' /></div><div style='text-align:center'><input class='radioFormat' type='radio' name='chooseFormat' value='2' /></div></div>";
        chooseFormatHtml += "<div style='float:left; padding:5px;'><div style='text-align:center'><img class='cuttings' src='imagesapp/cuttings/cut3.png' width='60' height='60' /></div><div style='text-align:center'><input class='radioFormat' type='radio' name='chooseFormat' value='3' /></div></div>";
        chooseFormatHtml += "<div style='float:left; padding:5px;'><div style='text-align:center'><img class='cuttings' src='imagesapp/cuttings/cut4.png' width='60' height='60' /></div><div style='text-align:center'><input class='radioFormat' type='radio' name='chooseFormat' value='4' /></div></div>";
        chooseFormatHtml += "<div style='float:left; padding:5px;'><div style='text-align:center'><img class='cuttings' src='imagesapp/cuttings/cut5.png' width='60' height='60' /></div><div style='text-align:center'><input class='radioFormat' type='radio' name='chooseFormat' value='5' /></div></div>";
        chooseFormatHtml += "<div style='float:left; padding:5px;'><div style='text-align:center'><img class='cuttings' src='imagesapp/cuttings/cut6.png' width='60' height='60' /></div><div style='text-align:center'><input class='radioFormat' type='radio' onClick='CH.VC.Istriangle();' name='chooseFormat' value='6' /></div></div>";
        chooseFormatHtml += "<div style='float:left; padding:5px;'><div style='text-align:center'><img class='cuttings' src='imagesapp/cuttings/cut7.png' width='60' height='60' /></div><div style='text-align:center'><input class='radioFormat' type='radio' name='chooseFormat' value='7' /></div></div>";
        chooseFormatHtml += "<div style='float:left; padding:5px;'><div style='text-align:center'><img class='cuttings' src='imagesapp/cuttings/cut8.png' width='60' height='60' /></div><div style='text-align:center'><input class='radioFormat' type='radio' name='chooseFormat' value='8' /></div></div>";*/
        
        $.ajax({
                        
            type: "POST",
            url:"getformats.php",
            data:{
            //bgsrc:bg
            },
            //success:function(data){
            success:function(data){
                $('#formats').append(data);
                $('#formats').append("<div style='clear:both'></div>");
                                
            } 

        });
        
        
        
        
        
        
        
        
        
        
        chooseFormatHtml += "<div  style='padding-left:25px; padding-right:25px; margin-top:30px'>";
        chooseFormatHtml += "<div style='font-size:20px'>Choose a filling</div>";
        chooseFormatHtml += "<div id='filling' style='margin-top:10px; padding:40px; background-color:white; border-right:1px solid gray; border-bottom:1px solid gray'>";
   
        $.ajax({
                        
            type: "POST",
            url:"getfillings.php",
            data:{
            //bgsrc:bg
            },
            //success:function(data){
            success:function(data){
                $('#filling').append(data);
                $('#filling').append("<div style='clear:both'></div>");
              
              
              
              
              
              
                $('.radioFilling').click(function() {
          
            
                    //alert("hello");
                    if($('.radioFilling').is(':checked') && $('.radioFormat').is(':checked')) 
                    {
                
                        //alert ($(this).prop("name")); 
                
                        $('.radioFilling').is(':checked');
                        CH.VC.filling=this.value;   //candies
                
                        //$('.radioFormat').is(':checked');
                        //alert(this.value);
                
                        $('#bannerInner').html("");            
                        CH.VC.putBackGroundInddforinitialscreen(bannertemphtml);
                        makecanvas();
                    }						
                });

                $('.radioFormat').click(function() {
                    
                    //alert($(this).prop("value"));
                    // alert($(this).prop("name"));
                    var temp=$(this).prop("value");
                    $.ajax({
                        
                        async: false,
                        type: "POST",
                        url:"storesession.php",
                        data:{
                            bgsrc:temp
                        },
                        //success:function(data){
                        success:function(data){
                            
                                    
                                    
                            ////////////////////////////////istriangle();
                            //alert(data);
                                    
                                    
                            data=data.trim();
                            if(data=="triangle"){
                                CH.VC.Istriangle();
                            //alert("I'm triangle");
                            }
                            else if(data=="square"){
                                        
                            //alert("I'm square");   
                            }
                            else{
                            //CH.VC.isreTri=="1";
                                            
                                            
                            //alert("I'm nothing");
                            //CH.VC.initmaketriangle();
                            }
                                        
                                 if($('.radioFilling').is(':checked') && $('.radioFormat').is(':checked')) //this if was just out of ajax call
                    {
                
                        //alert($(this).prop("name"));
                        $('#bannerInner').html("");            
                        CH.VC.putBackGroundInddforinitialscreen(bannertemphtml);
                        makecanvas();
                    }	   
                                    
                                
                        } 

                    })
                    
                    
                    
                    					
                });
              
              
              
              
              
              
            } 

        });
        chooseFormatHtml += "</div></div>";
        //chooseFormatHtml += "<div style='margin-top:50px; text-align:center'><img id='formatnextbtn' style='cursor:pointer' src='imagesapp/next_btn_g.png' onmouseover='this.src=\"imagesapp/next_btn_o.png\"' onmouseout='this.src=\"imagesapp/next_btn_g.png\"' /></div>";
        $('#bannerInner').html(chooseFormatHtml);
    //  $('.dd_BG').append("<table id='leftsidetable' width='92%' border='0' cellspacing='0' cellpadding='0'><tr><td height='29' align='center' valign='bottom'>Please Choose Format</td></tr></table>");
    //$('#bannerInner').append("<div style='padding-left:25px; padding-right:25px;'><div style='font-size:20px'>Choose a format</div><div style='margin-top:10px; padding:15px; background-color:white; border-right:1px solid gray; border-bottom:1px solid gray'><div style='float:left'><div style='text-align:center'><img class='cuttings' src='imagesapp/cuttings/cut1.png' width='57' height='57' /></div><div style='text-align:center'><input type='radio' name='chooseFormat' value='1' /></div></div><img class='cuttings' src='imagesapp/cuttings/cut2.png' width='57' height='57' /><img class='cuttings' src='imagesapp/cuttings/cut3.png' width='57' height='57' /><img class='cuttings' src='imagesapp/cuttings/cut4.png' width='57' height='57' /><img class='cuttings' src='imagesapp/cuttings/cut5.png' width='57' height='57' /><img class='cuttings' src='imagesapp/cuttings/cut6.png' width='57' height='57' /><img class='cuttings' src='imagesapp/cuttings/cut7.png' width='57' height='57' /><img class='cuttings' src='imagesapp/cuttings/cut8.png' width='57' height='57' /></div></div>");
    /*$('#formatnextbtn').click(function() {
						if($('.radioFilling').is(':checked') && $('.radioFormat').is(':checked')) 
						{
							$('#bannerInner').html("");            
							CH.VC.putBackGroundInddforinitialscreen(bannertemphtml);
							makecanvas();
						}						
						else
						{
							alert("You must select a format and a filling");
						}
					});*/
  
    //alert("hell");
        
					
    }        
}
    
    
    
    

